<template>
  <div class="profile-container">
    <Header />

    <router-view v-slot="{ Component }">
      <template v-if="!Component">
        <div class="profile-page">
          <!-- 面包屑导航 -->
          <div class="page-nav">
            <div class="breadcrumb">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/account' }">
                  <i class="fas fa-chevron-left"></i> {{ $t('返回账户') }}
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ $t('个人资料') }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </div>

          <!-- 页面标题区域 -->
          <div class="page-header">
            <div class="title-section">
              <h1>{{ $t('个人资料') }}</h1>
              <p class="subtitle">{{ $t('管理您的个人信息和联系方式') }}</p>
            </div>
          </div>

          <!-- 主要内容区 -->
          <div class="content-wrapper">
            <!-- 左侧资料卡片 -->
            <div class="profile-card main-card">
              <div class="card-header">
                <h2><i class="fas fa-user-circle"></i> {{ $t('基本信息') }}</h2>
                <p class="description">{{ $t('这些信息将显示在您的个人主页上') }}</p>
              </div>

              <el-form
                ref="formRef"
                :model="form"
                :rules="rules"
                label-position="top"
                class="amazon-form"
              >
                <!-- 头像上传区 -->
                <div class="avatar-section">
                  <el-upload
                    :show-file-list="false"
                    accept=".png,.jpg"
                    :http-request="uploadImg"
                  >
                    <div class="avatar-wrapper">
                      <img
                        v-if="form.face"
                        :src="form.face"
                        class="avatar"
                        alt=""
                      >
                      <i v-else class="fas fa-user"></i>
                      <div class="avatar-overlay">
                        <i class="fas fa-camera"></i>
                      </div>
                    </div>
                  </el-upload>
                  <div class="avatar-info">
                    <h3>{{ $t('个人头像') }}</h3>
                    <p>{{ $t('支持 JPG、PNG 格式，最大 2MB') }}</p>
                    <el-upload
                      :show-file-list="false"
                      accept=".png,.jpg"
                      :http-request="uploadImg"
                    >
                      <el-button class="amazon-button secondary">
                        <i class="fas fa-upload"></i> {{ $t('更换头像') }}
                      </el-button>
                    </el-upload>
                  </div>
                </div>

                <div class="form-grid">
                  <!-- 昵称 -->
                  <el-form-item :label="$t('昵称')" prop="nickName" class="form-item-full">
                    <div class="input-with-icon">
                      <i class="fas fa-user-edit"></i>
                      <el-input
                        v-model="form.nickName"
                        :placeholder="$t('请输入昵称')"
                        maxlength="20"
                        show-word-limit
                      />
                    </div>
                  </el-form-item>
                  <!-- 会员等级 -->
                  <el-form-item :label="$t('会员等级')"  class="form-item-full">
                    <div class="input-with-icon">
                      <i class="fas fa-user-edit"></i>
                      <el-input
                        v-model="userVipLevel"
                        :placeholder="$t('请输入会员等级')"
                        maxlength="20"
                        show-word-limit
                        disabled
                      />
                    </div>
                  </el-form-item>
                  <!-- 折扣 -->
                  <el-form-item :label="$t('折扣')"  class="form-item-full">
                    <div class="input-with-icon">
                      <i class="fas fa-user-edit"></i>
                      <el-input
                        v-model="userVipLevelRate"
                        :placeholder="$t('请输入折扣')"
                        maxlength="20"
                        show-word-limit
                        disabled
                      />
                    </div>
                  </el-form-item>
                  <!-- 性别 -->
<!--                  <el-form-item :label="$t('性别')" prop="gender">-->
<!--                    <el-radio-group v-model="form.gender" class="custom-radio">-->
<!--                      <el-radio label="male">-->
<!--                        <i class="fas fa-mars"></i> {{ $t('男') }}-->
<!--                      </el-radio>-->
<!--                      <el-radio label="female">-->
<!--                        <i class="fas fa-venus"></i> {{ $t('女') }}-->
<!--                      </el-radio>-->
<!--                      <el-radio label="other">-->
<!--                        <i class="fas fa-user-secret"></i> {{ $t('保密') }}-->
<!--                      </el-radio>-->
<!--                    </el-radio-group>-->
<!--                  </el-form-item>-->

                  <!-- 生日 -->
<!--                  <el-form-item :label="$t('生日')" prop="birthday" class="form-item-full">-->
<!--                    <div class="input-with-icon">-->
<!--                      <i class="fas fa-birthday-cake"></i>-->
<!--                      <el-date-picker-->
<!--                        v-model="form.birthday"-->
<!--                        type="date"-->
<!--                        :placeholder="$t('请选择生日')"-->
<!--                        :disabled-date="disabledDate"-->
<!--                        format="YYYY-MM-DD"-->
<!--                        style="width: 100%"-->
<!--                      />-->
<!--                    </div>-->
<!--                  </el-form-item>-->
                </div>
              </el-form>
            </div>

            <!-- 右侧联系方式卡片 -->
            <div class="contact-card main-card">
              <div class="card-header">
                <h2><i class="fas fa-address-card"></i> {{ $t('联系方式') }}</h2>
                <p class="description">{{ $t('用于接收订单通知和账户安全信息') }}</p>
              </div>

              <div class="contact-list">
                <!-- 邮箱 -->
                <div class="contact-item">
                  <div class="contact-icon">
                    <i class="fas fa-envelope"></i>
                  </div>
                  <div class="contact-info">
                    <label>{{ $t('电子邮箱') }}</label>
                    <div class="value">{{ form.email }}</div>
                    <p class="status verified">
                      <i class="fas fa-check-circle"></i> {{ $t('已验证') }}
                    </p>
                  </div>
                  <el-button
                    type="primary"
                    link
                    class="edit-btn"
                    @click="handleEmailModify"
                  >
                    {{ $t('修改') }} <i class="fas fa-chevron-right"></i>
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部操作区 -->
          <div class="bottom-actions">
            <div class="main-card action-card">
              <div class="action-wrapper">
                <div class="button-group">
                  <el-button
                    type="primary"
                    class="amazon-button primary action-btn"
                    :loading="loading"
                    @click="handleSubmit"
                  >
                    <i class="fas fa-save"></i> {{ $t('保存更改') }}
                  </el-button>
                  <el-button style="margin-left: 0" class="amazon-button secondary action-btn" @click="router.push('/account')">
                    {{ $t('取消') }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>

      <component :is="Component" v-else />
    </router-view>

    <Footer />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import Footer from '@/components/Footer.vue'
import { useRouter } from 'vue-router'
import { ApiUploadFile } from '@/api/common'
import { ApiUpdateBase } from '@/api/mine'
import useUserStore from '@/store/modules/user'
import {useI18n} from "vue-i18n";
const { t } = useI18n();

const router = useRouter()
const userStore = useUserStore()
const userVipLevel = userStore.userInfo?.member?.userVipLevel || 0
const userVipLevelRate = (userStore.userInfo?.member?.userVipLevelRate)*100+'%' || 0
// 表单数据
const form = ref({
  face: userStore.userInfo?.member?.face || '',
  nickName: userStore.userInfo?.member?.nickName || '',
  email: ''
})

// 表单规则
const rules = {
  nickName: [
    { required: true, message: t('请输入昵称'), trigger: 'blur' },
    { min: 2, max: 20, message: t('长度在 2 到 20 个字符'), trigger: 'blur' }
  ]
}

const uploadImg = (options) => {
  const formData = new FormData()
  formData.append('file', options.file)
  ApiUploadFile(formData).then(res => {
    form.value.face = res.data
  })
}

// 状态变量
const formRef = ref()
const loading = ref(false)

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()

    loading.value = true
    ApiUpdateBase({
      nickName: form.value.nickName,
      face: form.value.face
    })
      .then(() => {
        ElMessage.success(t('保存成功'))
      })
      .finally(() => {
        userStore.getInfo()
        loading.value = false
      })
  } catch (error) {
    console.error('验证失败:', error)
    loading.value = false
  }
}

// 修改邮箱按钮点击事件
const handleEmailModify = () => {
  router.push('/account/modify-email')
}
</script>

<style lang="scss" scoped>
.profile-container {
  background-color: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.profile-page {
  padding: 32px 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.page-nav {
  margin-bottom: 24px;

  .breadcrumb {
    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        color: #565656;
        font-weight: normal;
        font-size: 14px;

        &:hover {
          color: #c45500;
        }

        i {
          margin-right: 4px;
          font-size: 12px;
        }
      }
    }
  }
}

.page-header {
  margin-bottom: 32px;

  .title-section {
    h1 {
      font-size: 28px;
      color: #111;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .subtitle {
      color: #666;
      font-size: 14px;
    }
  }
}

.content-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.main-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 24px;

  .card-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;

    h2 {
      font-size: 18px;
      color: #111;
      font-weight: 500;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;

      i {
        color: #666;
      }
    }

    .description {
      color: #666;
      font-size: 14px;
    }
  }
}

.avatar-section {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;

  .avatar-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ddd;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    i {
      font-size: 48px;
      color: #ccc;
    }

    .avatar-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s;

      i {
        color: white;
        font-size: 24px;
      }
    }

    &:hover .avatar-overlay {
      opacity: 1;
      cursor: pointer;
    }
  }

  .avatar-info {
    flex: 1;

    h3 {
      font-size: 16px;
      color: #111;
      margin-bottom: 8px;
    }

    p {
      color: #666;
      font-size: 14px;
      margin-bottom: 16px;
    }
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;

  .form-item-full {
    grid-column: span 2;
  }
}

.input-with-icon {
  position: relative;
  width: 100%;

  i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
    z-index: 1;
  }

  :deep(.el-input__wrapper),
  :deep(.el-date-editor.el-input) {
    width: 100%;
  }

  :deep(.el-input__inner) {
    padding-left: 35px;
  }
}

.custom-radio {
  :deep(.el-radio) {
    margin-right: 24px;

    .el-radio__label {
      display: flex;
      align-items: center;
      gap: 4px;

      i {
        color: #666;
      }
    }
  }
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8f8f8;
  border-radius: 8px;
  width: 100%;

  .contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    i {
      font-size: 20px;
      color: #666;
    }
  }

  .contact-info {
    flex: 1;
    min-width: 0;

    label {
      font-size: 14px;
      color: #666;
      margin-bottom: 4px;
      display: block;
    }

    .value {
      font-size: 15px;
      color: #111;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .status {
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 4px;

      &.verified {
        color: #2e7d32;

        i {
          font-size: 12px;
        }
      }
    }
  }

  .edit-btn {
    flex-shrink: 0;
    font-size: 14px;

    i {
      font-size: 12px;
      margin-left: 4px;
    }
  }
}

.bottom-actions {
  margin-bottom: 32px;

  .action-card {
    margin-bottom: 0;
    padding: 20px 24px;
  }

  .action-wrapper {
    display: flex;
    justify-content: flex-end;

    .button-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 300px;
    }
  }
}

:deep(.amazon-button) {
  height: 36px;
  padding: 0 24px;
  font-size: 14px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  &.primary {
    background: linear-gradient(to bottom, #f7dfa5, #f0c14b);
    border-color: #a88734 #9c7e31 #846a29;
    color: #111;

    &:hover {
      background: linear-gradient(to bottom, #f5d78e, #eeb933);
    }
  }

  &.secondary {
    background: linear-gradient(to bottom, #f7f8fa, #e7e9ec);
    border-color: #adb1b8 #a2a6ac #8d9096;
    color: #111;

    &:hover {
      background: linear-gradient(to bottom, #e7eaf0, #d9dce1);
    }
  }
}

@media (max-width: 1024px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .profile-page {
    padding: 16px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .avatar-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bottom-actions {
    .action-card {
      padding: 16px;

      .action-wrapper {
        .button-group {
          width: 100%;
          max-width: 300px;
          margin: 0 auto;
          grid-template-columns: repeat(2, 1fr);
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .bottom-actions {
    .action-card {
      .action-wrapper {
        .button-group {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}
.fa-save{
  margin-right: 5px;
}
</style>
